<template>
  <div class="container">
    <div class="header border">
      {{ $t('firstPage.header') }}
      <span>{{ env.VITE_BASE_URL }}</span>
      <div class="header-right">
        <el-select v-model="language">
          <el-option label="中文" value="zh"></el-option>
          <el-option label="english" value="en"></el-option>
        </el-select>
      </div>
    </div>
    <div class="main">
      <div class="main-left border">
        {{ $t('firstPage.menu') }}

        <!-- 
          vue+ts中引用全局属性报类型错误
          在vite-env.d.ts文件中，或者新建一个.d.ts文件，加入配置即可
        -->
        {{ $t('greeting.hello') }}
        <left-menu></left-menu>
      </div>
      <div class="main-main border">
        <div>{{ $t('firstPage.main') }}</div>
        <el-select v-model="myselect">
          <el-option v-for="(item, index) in testList" :key="index" :label="item.label" :value="item.value"></el-option>
        </el-select>
        <router-view></router-view>
        <div>
          <h3>测试是否能正常切换element-plus的组件国际化</h3>
          <el-pagination v-model:current-page="currentPage" :page-size="100" layout="total, prev, pager, next"
            :total="1000" />
        </div>
        <el-button @click="clickEvent">使用element plus</el-button>
        <div>{{ msg }}</div>
        <child-a :msg="msg" @aToParent="handleA"></child-a>
        <div>这里是父组件，从a组件来的信息：{{ msgFromA }}</div>
        <child-b></child-b>
        <el-button @click="refreshTable">刷新表格数据</el-button>
        <div v-for="item in data.tableData" :key="item.id">
          <span>{{ item.name }} | </span>
          <span>{{ item.age }} | </span>
          <span>{{ item.gender }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import leftMenu from './left-menu.vue'
import _service from '@/service/request'
import { onMounted, reactive, ref, watch } from 'vue'
import childA from './child-a.vue'
import childB from './child-b.vue'
import { useLangStore } from '@/stores/index'
import { logMsg } from '@/utils/common'
const env = ref(import.meta.env)

const lang = useLangStore()

let language = ref(localStorage.getItem('language') || 'zh')

lang.setLanguage(language.value)
watch(language, () => {
  lang.setLanguage(language.value)
})
let currentPage = ref(1)
let msg = ref('')
const getList = () => {
  msg.value = '请求中...'
  _service
    .getDetail({
      userName: 'yanghaixia',
      password: 'yanghaixia'
    })
    .then((res) => {
      msg.value = 'res: ' + res
      console.log(msg.value)
    })
    .catch((err) => {
      msg.value = 'err: ' + err
      console.log(msg.value)
    })
    .finally(() => {
      callbackFn()
    })
}
const callbackFn = () => {
  document.cookie = `userName=helloworld`
  const token = {
    token: `userName=helloworld`,
    userName: 'helloworld',
    expireDate: new Date().getTime() + 1000 * 60 * 10
  }
  localStorage.setItem('token', JSON.stringify(token))
}
const clickEvent = () => {
  console.log('click el-button')
}
let msgFromA = ref('')
const handleA = (val: string) => {
  msgFromA.value = val
}

let myselect = ref('')
logMsg(myselect, msgFromA)
interface myTestListItem {
  label: string
  value: string
}
let testList = reactive<myTestListItem[]>([])

const setTestList = () => {
  const num = Math.ceil(Math.random() * 100 + 100)

  for (let i = 0; i < num; i++) {
    testList.push({
      label: 'item-label' + (i + 1),
      value: 'item-value' + (i + 1)
    })
  }
}
// let tableData = reactive([])  // 点击按钮刷新数据后，视图未更新
// let tableData = ref([])   // 视图发生更新
let data = reactive<myData>({
  tableData: []
})
logMsg(data)
const aaa = ref<myData>({
  tableData: []
})
logMsg(aaa)
interface tableItem {
  id: number
  name: string
  age: string
  gender: string
}
interface myData {
  tableData: tableItem[]
}
let refreshTable = function () {
  data.tableData.length = 0
  const random = Math.ceil(Math.random() * 1000)
  for (let i = 0; i < 10; i++) {
    const obj: tableItem = {
      id: random + i + 1,
      name: 'name' + (random + i + 1),
      age: 'age' + (random + i + 1),
      gender: 'gender' + (random + i + 1)
    }
    data.tableData.push(obj)
  }
  console.log(data.tableData)
}
onMounted(() => {
  getList()
  setTimeout(setTestList, 2000)
  refreshTable()
})
</script>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .border {
    border: 1px solid #000;
  }

  .header {
    height: 60px;

    &-right {
      float: right;
    }
  }

  .main {
    flex: 1;
    display: flex;

    &>div {
      height: 100%;
    }

    &-left {
      width: 250px;
    }

    &-main {
      flex: 1;
    }
  }
}
</style>
